<template>
<div v-if="show">
  <!-- 蒙层 -->
  <div class="layoutMask"></div>
  <!-- Alert -->
  <div class="popBox dialogCenter" style="position:absolute">
    <div class="popHead" v-if="mode === 'Alert'" v-on:click="close">
      <div class="pop_top"></div>
    </div>
    <div class="popBody" v-bind:class="containerCls" v-if="mode === 'Alert'">
      <div class="popTitle ta_c">
        <h1>{{ title }}</h1>
        <p class="fz_12 c_999" v-if="summary">{{ summary }}</p>
      </div>
      <div class="popMain">
        <slot>{{ alertContent }}</slot>
        <!--
        <div class="popTips" v-if="content">
          <p>一个人只能在一个考勤组。</p>
          <p>如遇重复，同一个人将调整到新创建的考勤组。</p>
        </div>
        <ul class="range">
          <li class="d-box">
            <div class="b-flex">50米</div><aside></aside>
          </li>
          <li class="d-box">
            <div class="b-flex">100米</div><aside></aside>
          </li>
          <li class="d-box">
            <div class="b-flex">200米</div><aside></aside>
          </li>
          <li class="d-box">
            <div class="b-flex">300米</div><aside><i class="check"></i></aside>
          </li>
          <li class="d-box">
            <div class="b-flex">500米</div><aside></aside>
          </li>
        </ul>
        -->
        <div class="btnCon ta_c">
          <div class="btn" v-on:click="onAlertOk">{{ alertButtonText }}</div>
        </div>
      </div>
    </div>
    <div class="popBody" v-if="mode === 'Confirm'">
      <div class="popMain confirmBox">
        <div class="popTxt">
          <h3>{{ title }}</h3>
          <p class="fz_12 c_999 mt_5">{{ confirmContent }}</p>
        </div>
        <div class="popTxt-btn d-box">
          <!-- 取消 -->
          <div class="b-flex ta_c" v-on:click="onConfirmCancel">{{ confirmButtonText[0] }}</div>
          <!-- 确定 -->
          <div class="b-flex ta_c" v-on:click="onConfirmOk">{{ confirmButtonText[1] }}</div>
        </div>
      </div>
    </div>
    <div class="popBody" v-if="mode === 'Dialog'">
      <div class="popMain confirmBox">
        <slot></slot>
        <div class="popTxt-btn d-box">
          <div class="b-flex ta_c" v-on:click="onConfirmCancel">{{ confirmButtonText[0] }}</div>
          <div class="b-flex ta_c" v-on:click="onConfirmOk">{{ confirmButtonText[1] }}</div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'Modal',
  data () {
    return {
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    mode: {
      type: String,
      default: 'Alert'
    },
    title: {
      type: String,
      default: '温馨提示'
    },
    summary: {
      type: String,
      default: ''
    },
    alertContent: { // 如果 slot 有内容，会自动覆盖 alertContent
      type: String,
      default: ''
    },
    confirmContent: {
      type: String,
      default: ''
    },
    alertButtonText: {
      type: String,
      default: '确定'
    },
    confirmButtonText: {
      type: Array,
      default () {
        return [ '取消', '确定' ]
      }
    },
    containerCls: {
      type: String,
      default: ''
    }
  },
  methods: {
    close () {
      this.$emit('close', false)
    },
    // Alert 确定按钮
    onAlertOk () {
      this.$emit('alertOk')
    },
    // Confirm 确定按钮
    onConfirmOk () {
      this.$emit('confirmOk')
    },
    // Confirm 取消按钮
    onConfirmCancel () {
      this.$emit('close', true)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bg_cyan {
  min-height: 100%;
}
</style>
